<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core">


    <h:form id="construcciones">
        <center>
            <p:growl id="myGrowl" showDetail="true" globalOnly="true" life="2000" />
        </center>
        <center>
            <p:panelGrid id="pgConstrucciones" style="width: 100%; font-size: 12px">
                <f:facet name="header">
                    <p:row>
                        <p:column colspan="6">Registro de construcciones</p:column>
                    </p:row>
                </f:facet>
                <p:row>
                    <p:column >
                        <h:outputLabel  value="Nombre:" />
                    </p:column>
                    <p:column colspan="3">
                        <p:inputText id="nombreConstruccion" 
                                     required="true"
                                     size="40"
                                     requiredMessage="#{msg.requiredField}"
                                     value="#{beanGestionConstrucciones.construccion.nombreConstruccion}"
                                     >

                        </p:inputText>
                        <p:message id="nombreConstruccionmsg" for="nombreConstruccion"></p:message>
                    </p:column>
                </p:row>
                <p:row>
                    <p:column >
                        <h:outputLabel  value="Fecha de inicio:" />
                    </p:column>
                    <p:column colspan="3">
                        <p:calendar id="fechaInicio" 
                                    required="true"
                                    requiredMessage="#{msg.requiredDate}"
                                    value="#{beanGestionConstrucciones.construccion.fechaInicialConstruccion}"
                                    navigator="true" >
                            <p:ajax event="dateSelect"  update="fechaFin" listener="#{beanGestionConstrucciones.handleDateSelect}" process="@this"/>
                        </p:calendar>
                        <p:message id="fechaIniciomsg" for="fechaInicio"></p:message>
                    </p:column>
                </p:row>
                <p:row>
                    <p:column>
                        <h:outputLabel  value="Fecha fin" />
                    </p:column>
                    <p:column colspan="3">

                        <p:calendar id="fechaFin" 
                                    required="true"
                                    mindate="#{beanGestionConstrucciones.fechaFin}"
                                    requiredMessage="#{msg.requiredDate}"
                                    value="#{beanGestionConstrucciones.construccion.fechaFinalConstruccion}">

                        </p:calendar>
                        <p:message id="fechaFinmsg" for="fechaFin"></p:message>
                    </p:column>

                </p:row>
                <p:row>
                    <p:column >
                        <h:outputLabel  value="Buscar punto de quedada:" />
                    </p:column>
                    <p:column>
                        <p:commandLink 
                            id="linkMapAgencia"
                            title="Ver mapa" onclick="mapDialogConstruccion.show()">
                            <p:graphicImage value="#{beanGestionConstrucciones.globeIcon}"/>
                        </p:commandLink>
                    </p:column>
                    <p:column>
                        <p:outputLabel value="Estado"></p:outputLabel>
                         <p:selectOneMenu style="font-size: 12px" required="true" requiredMessage="#{msg.requiredSelect}" 
                                          id="estadoConstruccion" 
                                          converter="estadoConstruccionConverter" 
                                          value="#{beanGestionConstrucciones.construccion.estadoConstruccionIdEstadoConstruccion}">  
                            <f:selectItem  itemLabel="--Seleccione un estado--" itemValue="" />  
                            <f:selectItems value="#{beanGestionConstrucciones.listaEstadosConstruccion}" var="estado" 
                                           itemValue="#{estado}" itemLabel="#{estado.nombreEstadoConstruccion}"></f:selectItems>
                        </p:selectOneMenu> 
                        <p:message for="estadoConstruccion" id="estadoConstruccionmsg"></p:message>
                    </p:column>
                    
                </p:row>
                <p:row>
                    <p:column colspan="5">
                        <p:separator title="Seleccione los barrios asignados a la construcción"  style="background-color: black; width:100%;height:20px" />
                    </p:column>

                </p:row>
                
                <p:row>
                    <p:column colspan="3">
                        <p:outputLabel value="Seleccione los barrios asignados a la construcción"></p:outputLabel>
                        <br></br>
                        <p:pickList style="text-align: center" id="dataBarrios"
                                    required="true"
                                    validatorMessage="#{msg.requiredPicklist}"
                                    value="#{beanGestionConstrucciones.pickListBarrioConstruccion.barrio}" 
                                    converter="barrioConverter"  var="barrioConstruccion"
                                    addLabel="Agregar" removeLabel="Quitar" removeAllLabel="Quitar todos" 
                                    addAllLabel="Agregar todos"
                                    itemLabel="#{barrioConstruccion.nombreBarrio}" 
                                    itemValue="#{barrioConstruccion}" onTransfer="ajaxSubmit()"
                                    validator="pickListBarrioConstruccion"
                                    showSourceFilter="true" showTargetFilter="true" filterMatchMode="contains">
                            <f:facet name="sourceCaption">Disponibles</f:facet>  
                            <f:facet name="targetCaption">Seleccionados</f:facet> 
                            
                        </p:pickList>
                        <p:message id="msgpick" for="dataBarrios"/>
                        <p:remoteCommand name="ajaxSubmit"/>
                    </p:column>
                    
                </p:row>

                <p:row >
                    <p:column colspan="5" style="text-align: left">
                        <p:commandButton value="Guardar" 
                                         process="@this,fechaInicio,fechaFin,dataBarrios,nombreConstruccion,estadoConstruccion"
                                         update="resumenConstrucciones,fechaInicio,fechaFin,dataBarrios,nombreConstruccion,myGrowl,fechaFinmsg,nombreConstruccionmsg,
                                         fechaIniciomsg,msgpick,estadoConstruccionmsg,estadoConstruccion"
                                         actionListener="#{guardarConstruccion}" />
                    </p:column>
                </p:row>
            </p:panelGrid>

        </center>
         <p:commandButton value="Actualizar " actionListener="#{actualizarConstrucciones}"
                                         process="@this"
                                         update="resumenConstrucciones,dataBarrios" 
                                         />
        <br></br>
        <br></br>
        <center>
            <p:dataTable id="resumenConstrucciones" var="construccion" style="font-size: 12px; width: 100%" 
                         value="#{beanGestionConstrucciones.listaConstrucciones}"
                         selectionMode="single"
                         selection="#{beanGestionConstrucciones.construccionSelected}"
                         rowKey="#{construccion.idConstruccion}"
                         emptyMessage="No se han encontrado construcciones registrados" paginator="true" >  
                <p:ajax event="rowSelect" listener="#{beanGestionConstrucciones.rowSelected}"   
                        update="resumenConstrucciones,:menu:tabViewGeneral:tabViewMovilizacion:construcciones:pgConstrucciones"/>  
                <p:ajax event="rowUnselect" listener="#{beanGestionConstrucciones.onRow}" update="resumenConstrucciones,:menu:tabViewGeneral:tabViewMovilizacion:construcciones:pgConstrucciones"/>  

                <f:facet name="header">  
                    <p:row>
                        <p:column >Resumen de Construcciones</p:column>
                    </p:row>
                </f:facet>  
                <p:column headerText="Nombre" filterBy="#{construccion.nombreConstruccion}">  
                    <h:outputText value="#{construccion.nombreConstruccion}"></h:outputText>
                </p:column>  

                <p:column headerText="Fecha Inicio" filterBy="#{construccion.fechaInicialConstruccion.toLocaleString().substring(0,10)}">  
                    <h:outputText value="#{construccion.fechaInicialConstruccion.toLocaleString().substring(0,10)}"></h:outputText>
                </p:column>
                <p:column headerText="Fecha Final" filterBy="#{construccion.fechaInicialConstruccion.toLocaleString().substring(0,10)}">  
                    <h:outputText value="#{construccion.fechaInicialConstruccion.toLocaleString().substring(0,10)}"></h:outputText>
                </p:column>
                <p:column headerText="Estado" filterBy="#{construccion.estadoConstruccionIdEstadoConstruccion.nombreEstadoConstruccion}">  
                    <h:outputText value="#{construccion.estadoConstruccionIdEstadoConstruccion.nombreEstadoConstruccion}"></h:outputText>
                </p:column>


            </p:dataTable> 
        </center>

    </h:form>




</html>
